<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跟随鼠标移动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <img src="./imgs/img.jpg" width="100" alt="">
</body>

<script>
    var pic = document.querySelector('img')
    var targetX = 0
    var targetY = 0
    var leaderX = 0
    var leaderY = 0

    // 事件源对象
    document.onclick = function (event) {
        // console.log('event.clientX='+event.clientX);
        // console.log('event.clientY='+event.clientY);
        // console.log('event.screenX='+event.screenX);
        // console.log('event.screenY='+event.screenY);
        // console.log('event.pageX='+event.pageX);
        // console.log('event.pageY='+event.pageY);
        // 兼容IE5,6,7,8
        event = event || window.event
        targetX = event.clientX - pic.offsetWidth / 2
        targetY = event.clientY - pic.offsetHeight / 2
    }

    function fn() {
        leaderX = leaderX + (targetX - leaderX) / 10
        leaderY = leaderY + (targetY - leaderY) / 10

        pic.style.left = leaderX + 'px';
        pic.style.top = leaderY + 'px'
    }

    setInterval(fn, 30)
</script>

</html>